<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--    <script src="../../js/AutoComplete/productAuto.js"></script>-->
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../../css/mypetstore.css" type="text/css" media="screen"/>
</head>
<body>
<header th:fragment="header">
    <div id="Header">

        <div id="Logo">
            <div id="LogoContent">
                <a href="/account/BirdsMain"><img src="../../images/logo-topbar.gif"/></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <!--                <%&#45;&#45; 购物车图标&#45;&#45;%>-->
<!--                <a href="http://localhost:8080/cartForm">-->
                <a href="/cartForm">
                    <img align="middle" name="img_cart" src="../../images/cart.gif"/>
                </a>

                <img align="middle" src="../../images/separator.gif"/>
                <!--                下面这里要改一下-->
                <spanf th:if="${session.loginAccount==null}">
                    <a href="/account/signon">Sign In</a>
                    <img align="middle" src="../../images/separator.gif"/>
                </spanf>

                <span th:if="${session.loginAccount!=null}">
                    <a href="/account/main">Sign Out</a>
                    <img align="middle" src="../../images/separator.gif"/>
                    <a href="/account/myAccount">My Account</a>
                    <img align="middle" src="../../images/separator.gif"/>
                </span>
                <a href="/catalog/help">?</a>
                <span class="welcome-message">
    <span th:if="${session.loginAccount!=null}">
        Welcome,
        <span th:text="${session.loginAccount.getUserid()}"></span>
    </span>
    </span>
            </div>
        </div>



        <div id="Search">
            <div id="SearchContent">
                <!--               method="post" -->
                <form action="/catalog/viewSearch" method="post">
                    <input type="text" name="keywords" size="14" id="keyword" autocomplete="false">
                    <input type="submit" value="Search" id="button-search">
<!--                     <div id="keywordsAvailability"></div>-->
                    <span id="keywordsAvailability"></span>
                </form>


                <div id="productAutoComplete">
                    <ul id="productAutoList">
                        <%--
                        <li class="productAutoItem">im a item</li>
                        --%>
                        <%--
                        <li class="productAutoItem">im also a item</li>
                        --%>
                    </ul>
                </div>

            </div>
        </div>

        <div id="QuickLinks">
            <a href="/catalog/viewCategory?categoryId=FISH" class="productShow" data-name="FISH"><img
                    src="../../images/sm_fish.gif"/></a>
            <img src="../../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=DOGS" class="productShow" data-name="DOGS"><img
                    src="../../images/sm_dogs.gif"/></a>
            <img src="../../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=REPTILES" class="productShow" data-name="REPTILES"><img
                    src="../../images/sm_reptiles.gif"/></a>
            <img src="../../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=CATS" class="productShow" data-name="CATS"><img
                    src="../../images/sm_cats.gif"/></a>
            <img src="../../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=BIRDS" class="productShow" data-name="BIRDS"><img
                    src="../../images/sm_birds.gif"/></a>
        </div>

    </div>
</header>
<script src="../../js/AutoComplete/productAuto.js"></script>
</body>

</html>